<template>
    <div class="back">
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" scrollable>
            欢迎进入我的图书
        </van-notice-bar>
        <van-contact-card type="edit" :name="this.info.rea_name" tel="13000000000" :editable="false" class="info"/>
<!--        内容区-->
        <div class="contents">
            <div class="item">
                <van-cell-group v-for="(item) in alldatas"  class="cell_group">
                    <van-cell :title="item.bookname" :label="item.author"/>
                    <van-cell :title="item.back_time+'归还'" icon="warning-o" class="cell">
                        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                        <template #right-icon>
                            <van-button type="primary" size="mini" @click="addtimes(item.id,$event,item.back_time,)">续借</van-button>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
        </div>
    </div>
</template>

<script>
    import { NoticeBar,Cell, CellGroup,Toast} from 'vant';
    // import { } from 'vant';
    import {getbooks,gettime,addtime} from "../network/user";

    export default {
        name: "Info",
        data(){
            return{
                books:[],
                info:{},
                dates:[],
                alldata:[],
            }
        },
        mounted() {
            console.log(this.$store.state.info);
            this.info = this.$store.state.info;
            this.getdata()

            this.changetel();
            console.log(this.alldata)

        },
        methods:{
            changetel(){
                let div = document.querySelector(".van-contact-card__value").children[1]
                div.innerHTML = `学号:\xa0\xa0${this.info.rea_no}`
            },
            merges(){

                    let alls = [];
                    console.log(this.books.length);
                    for(let i=0;i<this.books.length;i++){
                        console.log(222);
                        alls.push(Object.assign(this.books[i],this.dates[i]))
                    }
                    this.alldata = alls;
                    // console.log(alls+11)


            },
            addtimes(id,e,back_time){
                // console.log(id)
                addtime(id).then(res => {
                    if(res.status ===200){
                        Toast.success('续借成功');
                        e.path[0].style.display = "none";
                        // let t = new Date(back_time)
                        // t.setMonth(t.getMonth()+1)
                        // t = t.toISOString().slice(0,10);
                        // console.log(t)
                        this.getdata()
                    }else {
                        Toast.fail("续借失败")
                    }
                })
            },
            getdata(){
                getbooks(this.$store.state.info.rea_no).then(res =>{
                    if(res.status === 200){
                        this.books = [...res.data];
                        console.log(this.books)
                        // console.log(res.data.length)
                        this.num = res.data.length;
                        gettime(this.$store.state.info.rea_no).then(res => {
                            if(res.status === 200){
                                // console.log(res.data)
                                this.dates = [...res.data];
                                console.log(this.dates)
                            }
                            this.merges();

                        });

                    }
                });
            }
        },
        computed:{
            alldatas(){
                for (let i of this.alldata){
                    console.log(i)
                    i.back_time = new Date(i.back_time).toISOString().slice(0,10);
                    // i.back_time += "归还"
                }
                return this.alldata
            }
        }
    }
</script>

<style scoped>
    .back{
        height: 100%;
        width: 100%;

    }

    .info::before{
        /*border: none;*/
        /*content: none;*/
    }
    .info{
        background: lightblue;
    }

    .contents{
        /*margin-top: 5px;*/
    }
    .cell_group{
        margin-top: 8px;
        /*border: 1px solid ;*/
    }
    .contents{
        height: 100%;
        width: 100%;
        background-color: lightsteelblue;
        background-size: 100% 100%;
        background-attachment: fixed;
        background-repeat:no-repeat;
        position: absolute;
    }
</style>